// 引入柱状图组件
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import echarts from 'echarts/lib/echarts';

export default {
  data() {
    return {
      barColorArr: ['#1f6aff', '#ff5952', '#ff852e'],
    };
  },
  methods: {
    drawBarChart(id, xAxisData, chartDataList, options = {}) {
      const _self = this;
      const myChart = echarts.init(document.getElementById(id));
      const seriesData = [];
      chartDataList.forEach(singleDataList => {
        seriesData.push({
          type: 'bar',
          data: singleDataList,
          barWidth: 10,
          barCategoryGap: 4,
        });
      });
      const chartOptions = {
        color: this.barColorArr,
        tooltip: {
          trigger: 'axis',
          formatter(params) {
            console.log(params);
            if (options.tooltipFormatter) {
              return options.tooltipFormatter(params, _self.barColorArr);
            }
          },
          textStyle: {
            fontSize: 10,
          },
          padding: [10, 5],
          backgroundColor: '#fff',
          confine: true,
          extraCssText: 'width:auto;box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25);z-index:99;',
        },
        legend: {
          show: false
        },
        grid: {
          left: '2',
          right: '2',
          top: '15',
          bottom: '15',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisTick: { // 坐标轴刻度
            show: true,
            alighWithLabel: true,
            lineStyle: {
              color: '#e4e7dc',
              width: 0.5
            },
          },
          axisPointer: {
            snap: false,
            type: 'line',
            show: true,
            lineStyle: {
              color: '#8fb5ff',
              type: 'dashed'
            },
            label: {
              show: false
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e4e7dc',
              width: 0.5
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#858c9e',
            fontSize: 12,
            align: 'center',
            // interval: (index, value) => {
            //   return true;
            // },
            formatter(value) {
              return `${value.slice(5, 7)}/${value.slice(8, 10)}\n${value.slice(0, 4)}`;
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            inside: true,
            padding: [0, 0, 12, -5],
            textStyle: {
              color: '#5e6678',
              fontSize: 12,
              left: '10%',
            },
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#e4e7dc',
            }
          },
          splitLine: {
            lineStyle: {
              color: '#e4e7dc',
              width: 0.5
            }
          },
        },
        series: seriesData
        // series: {
        //   type: 'bar',
        //   data: seriesData,
        //   barWidth: 6,
        //   barCategoryGap: 6,
        //   // itemStyle: {
        //   //   color: '#fff',
        //   //   borderColor: '#1f6aff',
        //   //   borderWidth: 1
        //   // },
        // }
      };
      myChart.setOption(chartOptions);
    }
  }
};